<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <img src="../assets/zjt2.png" alt="" class="back" @click="back()" />
        <div class="head-search" v-show="status == 0">面试</div>
        <div class="head-search" v-show="status == 1">约面</div>
      </div>
      <div class="navBar">
        <div :class="{ active: actOn == 0 }" @click="act(0)">
          <span>待处理</span>
        </div>
        <div :class="{ active: actOn == 1 }" @click="act(1)">
          <span>已同意</span>
        </div>
        <div :class="{ active: actOn == 2 }" @click="act(2)">
          <span v-show="status == 0">已拒绝</span
          ><span v-show="status == 1">被拒绝</span>
        </div>
      </div>
    </div>
    <div class="content" v-show="actOn == 0">
      <div
        v-for="item in interviewListData.list"
        class="block"
        @click="goPost()"
        v-show="status == 0"
      >
        <div class="block-top">
			<div>{{ item.title }}</div>
         <span>{{ item.interviewTime }}</span>
         </div>
         <div class="block-btm">
           <div>{{ item.companyName }}</div>
          <span>邀约中</span>
        </div>
        <div class="block-button">
          <div class="blue" @click.stop="interviewInfo(item.id)">面试信息</div>
          <div class="green" @click.stop="update(item.id,1)">接受面试</div>
          <div class="red" @click.stop="update(item.id,2)">拒绝面试</div>
        </div>
      </div>
      <div
        v-for="item in companyinterviewListData.list"
        class="block"
        @click="goDtl()"
        v-show="status == 1"
      >
        <div class="block-top">
          <div>{{ item.userName }}</div>
          <span>{{ item.interviewTime }}</span>
        </div>
        <div class="block-btm">
          <div>应聘职位：{{ item.title }}</div>
          <span>正在考虑中</span>
        </div>
      </div>
    </div>
    <div class="content" v-show="actOn == 1">
      <div
        v-for="item in interviewListData.list"
        class="block"
        @click="goPost()"
        v-show="status == 0"
      >
        <div class="block-top">
          <div>{{ item.title }}</div>
            <span>{{ item.interviewTime }}</span>
          </div>
          <div class="block-btm">
            <div>{{ item.companyName }}</div>
          <span>已同意</span>
        </div>
        <div class="block-button">
          <div class="blue" @click.stop="interviewInfo(item.id)">面试信息</div>
        </div>
      </div>
      <div
        v-for="item in companyinterviewListData.list"
        class="block"
        @click="goDtl()"
        v-show="status == 1"
      >
        <div class="block-top">
          <div>{{ item.userName }}</div>
          <span>{{ item.interviewTime }}</span>
        </div>
        <div class="block-btm">
          <div>应聘职位：{{ item.title }}</div>
          <span>成功邀约</span>
        </div>
        <div class="block-button">
          <div class="blue"@click.stop="interviewInfo(item.id)">面试信息</div>
          <div class="green" @click.stop="com(item.id,item.recruitId,item.resumeId,0)">完成面试</div>
          <div class="red" @click.stop="com(item.id,item.recruitId,item.resumeId,3)">面试爽约</div>
        </div>
      </div>
    </div>
    <div class="content" v-show="actOn == 2">
      <div
        v-for="item in interviewListData.list"
        class="block"
        @click="goPost()"
        v-show="status == 0"
      >
        <div class="block-top">
          <div>{{ item.title }}</div>
          <span>{{ item.interviewTime }}</span>
        </div>
        <div class="block-btm">
          <div>{{ item.title }}</div>
          <span>已拒绝</span>
        </div>
      </div>
      <div
        v-for="item in interviewListData.list"
        class="block"
        @click="goDtl()"
        v-show="status == 1"
      >
        <div class="block-top">
          <div>{{ item.userName }}</div>
          <span>{{ item.interviewTime  }}</span>
        </div>
        <div class="block-btm">
          <div>应聘职位：{{ item.title}}</div>
          <span>已拒绝</span>
        </div>
      </div>
    </div>
    <mt-popup v-model="invite" position="center" >
        <p>面试信息</p>
		 <div>职位：Java工程师</div>
        <div>公司：IBM</div>
        <div>时间：2021-02-16</div>
        <div>地点：星海大厦105号</div>
        <div>联系人：王女士</div>
        <div>联系电话：1588888888</div>
        <div>备注：不要迟到</div> 
    </mt-popup>
  </div> 
</template>

<script>
import { Popup } from "mint-ui";
export default {
  inject: ["reload"],
  name: "mianshi",
  components: {Popup},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
	this.init()
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
	//this.mianshi(id)
  },
  // data() 为变量赋值等
  data() {
    return {
		// 当前用户为求职者时
		interviewListData: {
			totalCount: "",
			pageSize: "",
			totalPage: "",
			currPage: "",
			list: [
        {
        addtime: "2021-12-24 13:24:43",
        companyName: "大连华企智源",
        deletestatus: false,
        id: 2,
        interviewLocation: null,
        interviewStatus: 0,
        interviewTime: "2022-01-20 00:00:00",
        mobile: null,
        recruitId: 1,
        remarks: null,
        resumeId: 1,
        title: "java研发工程师a",
        userName: null
        },
        {
        addtime: "2021-12-24 13:24:43",
        companyName: "大连IBM",
        deletestatus: false,
        id: 2,
        interviewLocation: null,
        interviewStatus: 0,
        interviewTime: "2022-01-20 00:00:00",
        mobile: null,
        recruitId: 1,
        remarks: null,
        resumeId: 1,
        title: "java研发工程师B",
        userName: null
        }
      ],
		},
    companyinterviewListData: {
			totalCount: "",
			pageSize: "",
			totalPage: "",
			currPage: "",
			list: [
        {
        addtime: null,
        companyName: null,
        deletestatus: null,
        id: 2,
        interviewLocation: "地点2",
        interviewStatus: 0,
        interviewTime: "2022-01-21 15:00:00",
        mobile: null,
        recruitId: 1,
        remarks: null,
        resumeId: 1,
        title: "java研发工程师a",
        userName: "hello",
        },
        {
        addtime: null,
        companyName: null,
        deletestatus: null,
        id: 2,
        interviewLocation: "地点4",
        interviewStatus: 0,
        interviewTime: "2022-01-20 12:30:00",
        mobile: null,
        recruitId: 1,
        remarks: null,
        resumeId: 1,
        title: "java研发工程师B",
        userName: "world",
        }
      ],
		},
      
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      actOn: 0,
      invite:false,
	  mianshiData:{}
    };
  },
   
  // methods 编写js函数
  methods: {
    init() {/* 根据状态查询面试 */
      
    },
    goPost() {
      this.$router.push("/post");
    },
    goDtl() {
      this.$router.push("/resume");
    },
    // mian(){
		// this.invite=true;
    //   event.stopPropagation()
    //   console.log("aaa")
    // },
    back() {
      this.$router.go(-1); //返回上一层
    },
    act(i) {
      this.actOn = i;
	  this.init()
    },
	  interviewInfo(id){//点击加载面试信息
	    this.invite=true;
	  },
	  update(id,status){//接受面试拒绝面试
		  this.$http({
		  	 	method: "get",
		  	 	params: {
		  		id: id,
		  	    status: this.status,
		  	 	},
		  	 	url: "/api/userinterview/updataStatus"
		  	}).then(({data}) => {
		  	 	console.log(data);
		  	 })
		  location.reload();
		  },
	  com(id,recruitId,resumeId,x){//完成面试、面试爽约
		  
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 84px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.block {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
}
.block-top,
.block-btm {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block-top {
  margin-bottom: 10px;
}
.block-top div {
  font-size: 16px;
}
.block-top span {
  font-size: 12px;
  color: #bbb;
}
.block-btm div {
  color: #bbb;
  font-size: 14px;
}
.block-btm span {
  font-size: 14px;
  color: #3e63a8;
}
.bbb {
  color: #bbb !important;
}
.navBar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: #fff;
  height: 40px;
  font-size: 14px;
}
.navBar div {
  width: 100%;
  border-bottom: 1px solid #fff;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
}
.active {
  border-color: #3e63a8 !important;
  color: #3e63a8;
}
.block-button {
  width: 100%;
  display: flex;
  margin-top: 10px;
}
.block-button div {
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 5px;
}
.blue {
  background: #3e63a8;
}
.green {
  background: #53ca67;
}
.red {
  background: #ca5353;
}
.mint-popup{
  height: 60%;
  width: 70%;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  color: #000;
}
.mint-popup div{
  width: 100%;
  font-size: 14px;
  padding: 10px 0;
}
</style>
